<template>
    <!--   角色管理 -->
    <div>
        <div class="button">
            <el-button type="primary" :icon="Plus" @click="add">
                添加
            </el-button>
        </div>
        <div class="table">
            <el-table
                height="100%"
                ref="multipleTable"
                :data="state.tableData"
                style="width: 100%;"
                border
                v-loading="state.loading"
            >
                <template v-for="item in state.data" :key="item.porp">
                    <el-table-column
                        align="center"
                        :prop="item.porp"
                        :label="item.label"
                        :min-width="item.width"
                    >
                    </el-table-column>
                </template>

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button

                            type="text"
                            size="small"
                        >权限配置
                        </el-button>
                        <el-button

                            type="text"
                            size="small"
                        >修改
                        </el-button>
                        <el-button
                            @click="tableClick(scope.$index, scope.row)"
                            type="text"
                            size="small"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="state.dialogFormVisible" width="30%"
                   @close="cancel(form)"
                   @open="opendialog(form)"
                   @closed="closed"
                   :title="state.title"
                   :close-on-click-modal="false">
            <el-form :model="state.form" ref="form" :rules="state.rules">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="state.form.name"  placeholder="输入角色名称"/>
                </el-form-item>
            </el-form>
            <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="cancel(form)">取消</el-button>
                    <el-button type="primary" @click="submit(form)"
                    >保存</el-button
                    >
                  </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import {reactive, onMounted, ref, nextTick} from 'vue';
import {Plus} from '@element-plus/icons-vue'
import API from "@/api";
import {ElMessage} from "element-plus";
import type { FormInstance } from 'element-plus'
const form=ref<FormInstance>()
const state = reactive({
    tableData: [],
    loading: false,
    data: [
        {label: "角色名称", porp: "name"},
        {label: "创建时间", porp: "createTime"},
    ],
    title:'添加角色',
    dialogFormVisible:false,
    rules:{
        name: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
    },
    form:{
        name:''
    }
})

const cancel=(form:FormInstance| undefined)=>{
    state.dialogFormVisible=false
    getclear(form)
}

const opendialog=(form:FormInstance| undefined)=>{
    if (!form) return
    nextTick(()=>{
        form.clearValidate()
    })
}
//添加表单
const add=()=>{
    state.dialogFormVisible=true
}

const getclear=(form:FormInstance| undefined )=>{
    if (!form) return
    nextTick(()=>{
        form.resetFields()
    })
}

const submit=(form: FormInstance | undefined)=>{
    if (!form) return;
    form.validate(async valid => {
        if (valid) {
            try {
                const data={
                    name:state.form.name
                }
                const resp = await API.role_add({data:data, method: 'POST' });
                state.dialogFormVisible = false
                getclear(form)
                state.loading = true
                getRole()
            } catch (error) {
                state.dialogFormVisible = false
            }
        }
    })
}

const getRole = async () => {
    try {
        state.loading = false
        const resp = await API.role_list({method: 'GET'});
        state.tableData = resp
    } catch (err) {
        state.loading = false
    }
}

onMounted(() => {
    state.loading = true
    getRole()
})
</script>
<style lang="scss" scoped>
.button {
    margin: 15px;
}

.table {
    height: 80%;
}
::v-deep(.el-dialog__footer){
    text-align: center;
}
.dialog-footer  {
    button:first-child{
        margin-right: 10px;
    }
}
</style>